<template>
	<view class="chat-msg-item">
		<view class="chat-msg-tip"
			v-if="msgInfo.type == $enums.MESSAGE_TYPE.RECALL || msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
			{{ msgInfo.content }}
		</view>
		<view class="chat-msg-tip" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME">
			{{ $date.toTimeText(msgInfo.sendTime) }}
		</view>
		<view class="chat-msg-tip" v-if="msgInfo.type == $enums.MESSAGE_TYPE.CARD_JOB">
			<view class="jobCard">
				<view class="flex  jst-between alg-center">
					<view class="jobName u-3  txt-ellipsis t-left bold font18">
						{{jsonParse(msgInfo.content,'oddJobName')}}
					</view>
					<view class="">
						<text class="font18 u-red bold">{{jsonParse(msgInfo.content,'salary')}}</text>
						<text class="u-red font14 bold">元</text>
					</view>
				</view>
				<view class="flex alg-center mT5">
					<view class="jobTime">
						{{jsonParse(msgInfo.content,'jobBeginDatetime')}}-{{jsonParse(msgInfo.content,'jobEndDatetime')}}
					</view>
					<view class="jobTime">{{jsonParse(msgInfo.content,'salaryPaymentText')}}</view>
					<view class="jobTime">招{{jsonParse(msgInfo.content,'oddJobUseNum')}}人</view>
				</view>
				<view class="mT5 posBox">
					<view class="flex jst-between">
						<view class="jobPos flex alg-center w70">
							<image class="posImg" :src="resources.posIcon" mode=""></image>
							<view class="u-8bd font13 pL5  txt-ellipsis" style="width:calc(100% - 48rpx);text-align:left;">
								{{jsonParse(msgInfo.content,'hopeWorkAddress')}}
							</view>
						</view>
						<view>{{jsonParse(msgInfo.content,'distance')}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="chat-msg-tip" v-if="msgInfo.type == $enums.MESSAGE_TYPE.CARD_USER">
			
		</view>
		<view class="chat-msg-normal" v-if="isNormal" :class="{ 'chat-msg-mine': msgInfo.selfSend }">
			<xfHeadImage class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId"
				:url="headImage" :name="showName" size="small"></xfHeadImage>
			<view class="chat-msg-content">
				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
					<text>{{ showName }}</text>
				</view>
				<view class="chat-msg-bottom">
					<view v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT">
						<long-press-menu :items="menuItems" @select="onSelectMenu">
							<rich-text class="chat-msg-text"
								:nodes="$emo.transform(msgInfo.content,'emoji-normal')"></rich-text>
						</long-press-menu>
					</view>

					<view class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
						<long-press-menu :items="menuItems" @select="onSelectMenu">
							<view class="img-load-box">
							
								<image class="send-image" mode="heightFix" :src="JSON.parse(msgInfo.content).thumbUrl"
									lazy-load="true" @click.stop="onShowFullImage()">
								</image>
								<loading v-if="loading"></loading>
							</view>
						</long-press-menu>
						<text title="发送失败" v-if="loadFail" @click="onSendFail"
							class="send-fail iconfont icon-warning-circle-fill"></text>
					</view>
					<view class="chat-msg-file" v-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE">
						<long-press-menu :items="menuItems" @select="onSelectMenu">
							<view class="chat-file-box">
								<view class="chat-file-info">
									<uni-link class="chat-file-name" :text="data.name" showUnderLine="true"
										color="#007BFF" :href="data.url"></uni-link>
									<view class="chat-file-size">{{ fileSize }}</view>
								</view>
								<view class="chat-file-icon iconfont icon-file"></view>
								<loading v-if="loading"></loading>
							</view>
						</long-press-menu>
						<text title="发送失败" v-if="loadFail" @click="onSendFail"
							class="send-fail iconfont icon-warning-circle-fill"></text>
					</view>
					<long-press-menu v-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO" :items="menuItems"
						@select="onSelectMenu">
						<view class="chat-msg-audio chat-msg-text" @click="onPlayAudio()">
							<text class="iconfont icon-voice-play"></text>
							<text class="chat-audio-text">{{ JSON.parse(msgInfo.content).duration + '"' }}</text>
							<text v-if="audioPlayState == 'PAUSE'" class="iconfont icon-play"></text>
							<text v-if="audioPlayState == 'PLAYING'" class="iconfont icon-pause"></text>
						</view>
					</long-press-menu>
					<long-press-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
						<view class="chat-realtime chat-msg-text" @click="$emit('call')">
							<text v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VOICE"
								class="iconfont icon-chat-voice"></text>
							<text v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VIDEO"
								class="iconfont icon-chat-video"></text>
							<text>{{ msgInfo.content }}</text>
						</view>
					</long-press-menu>
					<view class="chat-msg-status" v-if="!isAction">
						<text class="chat-readed" v-if="msgInfo.selfSend && !msgInfo.groupId
							&& msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</text>
						<text class="chat-unread" v-if="msgInfo.selfSend && !msgInfo.groupId
							&& msgInfo.status != $enums.MESSAGE_STATUS.READED">未读</text>
					</view>
					<view class="chat-receipt" v-if="msgInfo.receipt" @click="onShowReadedBox">
						<text v-if="msgInfo.receiptOk" class="tool-icon iconfont icon-ok"></text>
						<text v-else>{{ msgInfo.readedCount }}人已读</text>
					</view>
				</view>
			</view>
		</view>
		<chat-group-readed ref="chatGroupReaded" :groupMembers="groupMembers" :msgInfo="msgInfo"></chat-group-readed>

	</view>
</template>

<script>
	import longPressMenu from "@/components/chat/long-press-menu/long-press-menu.vue"
	import loading from "@/components/chat/loading/loading.vue"
	export default {
		name: "chat-message-item",
		components: {
			longPressMenu,
			loading
		},
		props: {
			headImage: {
				type: String,
				required: true
			},
			showName: {
				type: String,
				required: true
			},
			msgInfo: {
				type: Object,
				required: true
			},
			groupMembers: {
				type: Array
			}
		},
		data() {
			return {
				audioPlayState: 'STOP',
				innerAudioContext: null,
				menu: {
					show: false,
					style: ""
				}
			}
		},
		methods: {
			jumpJobDetial(v) {
				let str = JSON.parse(v)
				uni.navigateTo({
					url: `/pages/common/jobDetail/index?id=${str.id}`,
				})
			},
			jsonParse(v, name) {
				let str = JSON.parse(v)
				return str[name] ? str[name] : '';
			},
			onSendFail() {
				uni.showToast({
					title: "该文件已发送失败，目前不支持自动重新发送，建议手动重新发送",
					icon: "none"
				})
			},
			onPlayAudio() {
				// 初始化音频播放器
				if (!this.innerAudioContext) {
					this.innerAudioContext = uni.createInnerAudioContext();
					let url = JSON.parse(this.msgInfo.content).url;
					this.innerAudioContext.src = url;
					this.innerAudioContext.onEnded((e) => {
						console.log('停止')
						this.audioPlayState = "STOP"
						this.emit();
					})
					this.innerAudioContext.onError((e) => {
						this.audioPlayState = "STOP"
						console.log("播放音频出错");
						console.log(e)
						this.emit();
					});
				}
				if (this.audioPlayState == 'STOP') {
					this.innerAudioContext.play();
					this.audioPlayState = "PLAYING";
				} else if (this.audioPlayState == 'PLAYING') {
					this.innerAudioContext.pause();
					this.audioPlayState = "PAUSE"
				} else if (this.audioPlayState == 'PAUSE') {
					this.innerAudioContext.play();
					this.audioPlayState = "PLAYING"
				}
				this.emit();
			},
			onSelectMenu(item) {
				this.$emit(item.key.toLowerCase(), this.msgInfo);
				this.menu.show = false;
			},
			onShowFullImage() {
				let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
				uni.previewImage({
					urls: [imageUrl]
				})
			},
			onShowReadedBox() {
				this.$refs.chatGroupReaded.open();
			},
			emit() {
				this.$emit("audioStateChange", this.audioPlayState, this.msgInfo);
			},
			stopPlayAudio() {
				if (this.innerAudioContext) {
					this.innerAudioContext.stop();
					this.innerAudioContext = null;
					this.audioPlayState = "STOP"
				}
			}
		},
		computed: {
			loading() {
				console.log('chat-message-item', this.msgInfo)
				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
			},
			loadFail() {
				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
			},
			data() {
				return JSON.parse(this.msgInfo.content)
			},
			fileSize() {
				let size = this.data.size;
				if (size > 1024 * 1024) {
					return Math.round(size / 1024 / 1024) + "M";
				}
				if (size > 1024) {
					return Math.round(size / 1024) + "KB";
				}
				return size + "B";
			},
			menuItems() {
				let items = [];
				if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.TEXT) {
					items.push({
						key: 'COPY',
						name: '复制',
						icon: 'bars'
					});
				}
				if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
					items.push({
						key: 'RECALL',
						name: '撤回',
						icon: 'refreshempty'
					});
				}
				items.push({
					key: 'DELETE',
					name: '删除',
					icon: 'trash',
					color: '#e64e4e'
				});
				if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.FILE) {
					items.push({
						key: 'DOWNLOAD',
						name: '下载并打开',
						icon: 'download'
					});
				}
				return items;
			},
			isAction() {
				return this.$msgType.isAction(this.msgInfo.type);
			},
			isNormal() {
				const type = this.msgInfo.type;
				return this.$msgType.isNormal(type) || this.$msgType.isAction(type)
			}
		}

	}
</script>

<style scoped lang="scss">
	.jobCard {
		padding: 20rpx 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.jobName {
			width: 70%;
		}

		.jobLeft {
			max-width: 70%;
		}

		.jobTag {
			padding: 6rpx 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}
	}

	.chat-msg-item {
		padding: 2rpx 20rpx;

		.chat-msg-tip {
			line-height: 60rpx;
			text-align: center;
			color: $im-text-color-lighter;
			font-size: $im-font-size-smaller-extra;
			padding: 10rpx;
		}

		.chat-msg-normal {
			position: relative;
			margin-bottom: 22rpx;
			padding-left: 110rpx;
			min-height: 80rpx;

			.avatar {
				position: absolute;
				top: 0;
				left: 0;
			}

			.chat-msg-content {
				text-align: left;

				.chat-msg-top {
					display: flex;
					flex-wrap: nowrap;
					color: $im-text-color-lighter;
					font-size: $im-font-size-smaller;
					line-height: $im-font-size-smaller;
					height: $im-font-size-smaller;
				}

				.chat-msg-bottom {
					display: inline-block;
					padding-right: 80rpx;
					margin-top: 5rpx;

					.chat-msg-text {
						position: relative;
						line-height: 1.6;
						margin-top: 10rpx;
						padding: 16rpx 24rpx;
						background-color: #fff;
						border-radius: 20rpx;
						color: #333;
						font-size: 28rpx;
						text-align: left;
						display: block;
						word-break: break-all;
						white-space: pre-line;


						&:after {
							content: "";
							position: absolute;
							left: -20rpx;
							top: 26rpx;
							width: 6rpx;
							height: 6rpx;
							border-style: solid dashed dashed;
							border-color: #fff transparent transparent;
							overflow: hidden;
							border-width: 18rpx;
						}
					}


					.chat-msg-image {
						display: flex;
						flex-wrap: nowrap;
						flex-direction: row;
						align-items: center;

						.img-load-box {
							position: relative;

							.send-image {
								min-width: 200rpx;
								max-width: 420rpx;
								height: 350rpx;
								cursor: pointer;
								border-radius: 4px;
							}
						}


						.send-fail {
							color: $im-color-danger;
							font-size: $im-font-size;
							cursor: pointer;
							margin: 0 20px;
						}
					}

					.chat-msg-file {
						display: flex;
						flex-wrap: nowrap;
						flex-direction: row;
						align-items: center;
						cursor: pointer;

						.chat-file-box {
							position: relative;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							min-height: 60px;
							border-radius: 4px;
							padding: 10px 15px;
							box-shadow: $im-box-shadow-dark;

							.chat-file-info {
								flex: 1;
								height: 100%;
								text-align: left;
								font-size: 14px;
								width: 300rpx;

								.chat-file-name {
									font-weight: 600;
									margin-bottom: 15px;
									word-break: break-all;
								}
							}

							.chat-file-icon {
								font-size: 80rpx;
								color: #d42e07;
							}
						}

						.send-fail {
							color: #e60c0c;
							font-size: 50rpx;
							cursor: pointer;
							margin: 0 20rpx;
						}

					}

					.chat-msg-audio {
						display: flex;
						align-items: center;

						.chat-audio-text {
							padding-right: 8px;
						}

						.icon-voice-play {
							font-size: 18px;
							padding-right: 8px;
						}
					}

					.chat-realtime {
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 20px;
							padding-right: 8px;
						}
					}

					.chat-msg-status {
						line-height: $im-font-size-smaller-extra;
						font-size: $im-font-size-smaller-extra;
						padding-top: 2rpx;

						.chat-readed {
							display: block;
							padding-top: 2rpx;
							color: $im-text-color-lighter;
						}

						.chat-unread {
							color: $im-color-danger;
						}
					}

					.chat-receipt {
						font-size: $im-font-size-smaller;
						color: $im-text-color-lighter;
						font-weight: 600;

						.icon-ok {
							font-size: 20px;
							color: $im-color-success;
						}
					}
				}
			}


			&.chat-msg-mine {
				text-align: right;
				padding-left: 0;
				padding-right: 110rpx;

				.avatar {
					left: auto;
					right: 0;
				}

				.chat-msg-content {
					text-align: right;

					.chat-msg-bottom {
						padding-left: 80rpx;
						padding-right: 0;

						.chat-msg-text {
							margin-left: 10px;
							background-color: #EAF4FE;
							color: #333;

							&:after {
								left: auto;
								right: -9px;
								border-top-color: #EAF4FE;
							}
						}

						.chat-msg-image {
							flex-direction: row-reverse;
						}

						.chat-msg-file {
							flex-direction: row-reverse;
						}

						.chat-msg-audio {
							flex-direction: row-reverse;

							.chat-audio-text {
								padding-right: 0;
								padding-left: 8px;
							}

							.icon-voice-play {
								transform: rotateY(180deg);
							}
						}

						.chat-realtime {
							display: flex;
							flex-direction: row-reverse;

							.iconfont {
								transform: rotateY(180deg);
							}
						}

					}
				}
			}

		}
	}
</style>